<template>
    <view class="container">
        <u-form :model="formData" :rules="rules" ref="formRef" :label-width="200">
            <view class="traveler-form">
                <!-- 姓名输入 -->
                <u-form-item label="姓名" prop="name">
                    <u-input v-model="formData.name" placeholder="请输入姓名" />
                </u-form-item>

                <!-- 手机号输入 -->
                <u-form-item label="手机号" prop="phone">
                    <u-input v-model="formData.phone" placeholder="请输入手机号" type="number" />
                </u-form-item>

                <!-- 行李个数输入 -->
                <u-form-item label="行李个数" prop="luggageCount">
                    <u-input
                        v-model.number="formData.luggageCount"
                        placeholder="请输入行李个数"
                        type="number"
                    />
                </u-form-item>

                <!-- 保存按钮 -->
            </view>
            <view class="btn-footer">
                <button class="commit_btn" @click="saveTraveler">保存</button>
            </view>
        </u-form>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const formData = ref({
    name: '',
    phone: '',
    luggageCount: 0
})
// 如果使用 TypeScript，可添加类型
const formRef = ref<{ validate: () => Promise<boolean> }>()

const travelers = ref([])

// 表单验证规则
const rules = {
    name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
    phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'change' }
    ],
    luggageCount: [
        { required: true, message: '行李个数不能为空', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value < 0) callback(new Error('行李个数不能为负数'))
                else callback()
            },
            trigger: 'change'
        }
    ]
}

// 保存并返回
async function saveTraveler() {
    try {
        const valid = await formRef.value.validate()
        if (valid) {
            // 先触发全局事件
            uni.$emit('travelerSaved', {
                ...formData.value,
                id: Date.now() // 添加临时唯一标识
            })
            uni.navigateBack()
        }
    } catch (e) {
        uni.showToast({ title: '保存失败', icon: 'none' })
        console.error(e)
    }
}

onLoad((options) => {
    if (options.mode === 'edit' && options.index !== undefined) {
        const index = Number(options.index)
        if (index >= 0 && index < travelers.value.length) {
            const traveler = travelers.value[index]
            formData.value = {
                name: traveler.name,
                phone: traveler.phone,
                luggageCount: traveler.luggageCount || 0
            }
        }
    }
})
</script>

<style scoped lang="scss">
.container {
    height: 100%;
}

.form-scroll {
    flex: 1; // 填充剩余空间
    overflow-y: auto; // 支持滚动（当内容过多时）
}

.traveler-form {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 20rpx;

    .u-form-item__body__label__text {
        font-size: 28rpx;
    }

    .u-input__input {
        font-size: 28rpx;
    }
}

.btn-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
}
</style>
